<template>
  <div class="img-viewer" v-if="isShow">
    <img-viewer
      :options="ImageOptions"
      :images="images"
      @inited="inited"
      class="viewer"
      :class="[viewMethod === 'fixed' ? '' : 'viewer-img']"
      ref="viewer"
    >
      <template slot-scope="scope">
        <img
          v-for="src in scope.images"
          :src="src.url"
          :key="src"
          :alt="src.alt"
          :class="[viewMethod === 'fixed' ? '' : 'viewer-img-item']"
          :title="src.title"
        />
        {{ scope.ImageOptions }}
      </template>
    </img-viewer>
  </div>
</template>

<script>
import ImgViewer from 'v-viewer';
export default {
  name: 'imageViewer',
  components: {
    ImgViewer
  },
  props: {
    // 图片，支持数组
    images: {
      type: Array,
      default() {
        return [];
      }
    },
    // 显示方法， fixed 全界面展示， in 在某个div中展示
    viewMethod: {
      type: String,
      default: 'fixed'
    }
  },
  data() {
    return {
      // 图片的设置
      ImageOptions: {
        navbar: '',
        title: true
      },
      isShow: true
    };
  },
  watch: {
    images() {
      this.ImageOptions.navbar = this.images.length > 1 ? true : false;
    }
  },
  methods: {
    // 初始图片的预览
    inited(viewer) {
      this.$viewer = viewer;
      if (this.viewMethod === 'fixed') {
        this.$viewer.show();
      }
    },
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    }
  }
};
</script>
